<template>
  <div>
    <el-button type="primary" @click="add">添加</el-button>
    <info @search="fn_info"></info>
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="Loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column prop="phone" label="电话" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="store" label="积分"></el-table-column>
      <el-table-column prop="pet" label="爱宠">
        <template slot-scope="scope">
          <el-button @click="petInfo(scope.row._id)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="dialogTableVisible = true;orderInfo(scope.row._id)">订单</el-button>
          <el-button size="mini" @click="handleEdit(scope.row._id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="condition.limit"
      @current-change="pages"
      :current-page="condition.page"
    ></el-pagination>
    <el-dialog title="订单" :visible.sync="dialogTableVisible">
      <el-dialog width="48%" :visible.sync="innerVisible" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width: 334px;">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="订单价格" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间" prop="time">
            <div class="block">
              <el-date-picker v-model="form.time" type="date" placeholder="选择日期"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form');">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-button type="primary" @click="innerVisible=true">添加</el-button>
      <el-table :data="gridData">
        <el-table-column property="name" label="商品名称" width="150"></el-table-column>
        <el-table-column property="price" label="订单价格" width="200"></el-table-column>
        <el-table-column property="time" label="时间"></el-table-column>
        <el-table-column property="state" label="状态"></el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="innerVisible = true;orderupdate(scope.row._id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="orderDelete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import info from "@/components/Search";

export default {
  data() {
    return {
      rid: "",
      option: [
        {
          value: "已付款",
          label: "已付款"
        },
        {
          value: "未付款",
          label: "未付款"
        }
      ],
      form: {
        name: "",
        price: "",
        time: "",
        state: ""
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入订单价格", trigger: "blur" }],
        time: [{ required: true, message: "请输选择时间", trigger: "blur" }],
        state: [{ required: true, message: "请选择状态", trigger: "blur" }]
      },
      dialogTableVisible: false,
      innerVisible: false,
      formLabelWidth: "120px"
    };
  },
  components: {
    info
  },
  //生命周期函数
  created() {
    this.$store.dispatch("Petowners/data");
    this.$store.commit("Petowners/setCondition", { page: 1 });
  },
  computed: {
    order() {
      return this.$store.state.Petowners.orderUpdate;
    },
    gridData() {
      return this.$store.state.Petowners.order;
    },
    tableData() {
      return this.$store.state.Petowners.data;
    },
    total() {
      return this.$store.state.Petowners.total;
    },
    condition() {
      return this.$store.state.Petowners.condition;
    },
    Loading() {
      return this.$store.state.Petowners.isLoading;
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.order._id) {
            this.form._id = this.order._id;
            this.$store.dispatch("Petowners/OrderUp", this.form);
            this.$store.commit("Petowners/setOrderUpdate", {});
            this.$store.dispatch("Petowners/getOrder", this.rid);
            this.innerVisible = false;
          } else {
            this.form.Petowners = this.rid;
            this.$store.dispatch("Petowners/addOrder", this.form);
            this.$store.commit("Petowners/setOrderUpdate", {});
            this.$store.dispatch("Petowners/getOrder", this.rid);
            this.innerVisible = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    orderupdate(id) {
      this.$store.dispatch("Petowners/getByOrderId", id);
    },
    pages(p) {
      this.$store.commit("Petowners/setCondition", { page: p });
      this.$store.dispatch("Petowners/data");
    },
    fn_info(key) {
      this.$store.commit("Petowners/setCondition", {
        key
      });
      this.$store.dispatch("Petowners/data");
    },
    add() {
      this.$router.push({
        name: "添加宠物主"
      });
    },
    handleEdit(id) {
      this.$router.push({
        name: "修改宠物主",
        params: {
          id
        }
      });
    },
    petInfo(id) {
      this.$router.push({
        name: "查看宠物",
        params: {
          id
        }
      });
    },
    async handleDelete(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
          onClose: () => {
            this.$store.dispatch("Petowners/deletePetowners", id);
          }
        });
      });
    },
    async orderDelete(id) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
          onClose: () => {
            this.$store.dispatch("Petowners/deleteOr", id);
            this.$store.dispatch("Petowners/getOrder", this.rid);
          }
        });
      });
    },
    orderInfo(id) {
      this.rid = id;
      this.$store.dispatch("Petowners/getOrder", id);
    }
  },
  mounted() {
    if (this.order) {
      this.form = {
        name: this.order.name,
        price: this.order.price,
        time: this.order.time,
        state: this.order.state
      };
    }
  },
  watch: {
    order: function() {
      if (this.order) {
        this.form = {
          name: this.order.name,
          price: this.order.price,
          time: this.order.time,
          state: this.order.state
        };
      }
    }
  }
};
</script>
